<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Spreadsheet Template Builder App</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<ol class="breadcrumb">
			<li th:text="#{breadcrumbs.template}">Template Selection</li>
			<li th:text="#{breadcrumbs.metadata}">Metadata Schema
				Configuration</li>
			<li class="active" th:text="#{breadcrumbs.metadataElements}">Metadata
				Elements Selection</li>
			<li th:text="#{breadcrumbs.review}">Review and Generate</li>
		</ol>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 th:with="text=#{metadata.elements.title}"
					th:text="${text + ' (' + mdSchemaInstance.prefix + ')'}"
				 	class="panel-title">List of elements included in the schema</h3>
			</div>
			<div class="panel-body">
				<form id="elements" class="form-horizontal"
					th:action="${flowExecutionUrl}" method="post"
					th:object="${mdSchemaInstance}">
					<fieldset>
						<legend th:if="${typeSS == 0}" th:text="#{metadata.elements.text1}">Select
							the elements that will be included in the Collection-level
							spreadsheet</legend>
						<legend th:unless="${typeSS == 0}"
							th:text="#{metadata.elements.text2}">Select the elements
							that will be included in the File-level spreadsheet</legend>
						<p>
							<a th:text="#{metadata.elements.selectAll}" href='javascript:SetAllCheckBoxes("elements", true)'>Select
								All </a> | <a th:text="#{metadata.elements.deselectAll}" href='javascript:SetAllCheckBoxes("elements", false)'>Deselect
								All </a>
						</p>
						<p th:if="${flowRequestContext.messageContext.hasErrorMessages()}"
							th:each="message : ${flowRequestContext.messageContext.getAllMessages()}">
							<b th:text="${message.text}"></b>
						</p>
						<table id="metadata-elements" class="table">
							<tr>
								<th th:text="#{metatada.elements.table.name}">Name</th>
								<th th:text="#{metatada.elements.table.comment}">Comment</th>
								<th th:text="#{metatada.elements.table.type}">Type</th>
								<th th:text="#{metatada.elements.table.select}">Select</th>
								<th th:text="#{metatada.elements.table.optional}">Is
									optional</th>
							</tr>
							<tr th:if="${!elem.isHidden()}" th:each="elem, stat : *{selectedSchemaElements}">
								<td th:text="${elem.getName()}"></td>
								<td>
									<span
									th:text="${elem.getComment() != ''} ? ${elem.getComment()} : #{metadata.elements.notavailable}"></span>
								</td>
								<td th:text="${elem.getType()}"></td>
								<td><input th:if="${elem.isOptional()}" type="checkbox"
									th:field="*{selectedSchemaElements[__${stat.index}__].selected}" />
									<input th:unless="${elem.isOptional()}" type="checkbox"
									th:disabled="disabled"
									th:field="*{selectedSchemaElements[__${stat.index}__].selected}" />

								</td>
								<td	th:text="${elem.isOptional()} ? #{metadata.elements.yes} : #{metadata.elements.no}"></td>
							</tr>
						</table>
					</fieldset>
					<p>
						<input type="hidden" id="listMetadataElements"
							name="listMetadataElements" value="" />
					</p>
					<p>
						<input class="btn btn-primary" type="submit"
							onclick='javascript:enableElements("elements")'
							name="_eventId_addElements"
							th:value="#{metadata.elements.form.submit}" /> <input
							class="btn btn-danger" type="submit" name="_eventId_addCancelled"
							th:value="#{metadata.elements.form.cancel}" />
					</p>
				</form>
			</div>
		</div>
		<div id="footer" th:include="fragments/footer :: footer"></div>
	</div>
</body>
</html>